<template>
    <div>
        <div class="rate">
            <b>评分：</b> <Rate v-model="feedback.rate"></Rate>
        </div>

        <Input
            v-model="feedback.words"
            type="textarea"
            :rows="4"
            placeholder="请输入您宝贵的意见："
        ></Input>
        <Button type="success" class="feedback-submit" @click="submitFeedback"
            >确认提交</Button
        >

        <Card
            style="width: 50%; margin: 5px auto"
            v-for="(p, index) in showList"
            :key="index"
            class="card"
        >
            <!-- :v-if="p['id'] < " -->
            <p slot="title">
                用户名：
                {{ p["user"] }}
            </p>
            <span>
                评分：
                <Icon type="ios-star" v-for="n in p['rate']" :key="n"></Icon>
                <!-- <Icon type="ios-star" v-if="item.rate >= 9.5"></Icon
                > -->
                <!-- <Icon type="ios-star-half" v-else></Icon> -->
                <br />
                留言：{{ p["words"] }}
            </span>
        </Card>
        <Page
            :total="feedbackList.length"
            show-sizer
            show-elevator
            show-total
            style="text-align: center"
            @on-change="changePage"
            @on-page-size-change="changeEveryPageShow"
        ></Page>
        <Back-top></Back-top>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "Feedback",
    data() {
        return {
            feedback: {
                user: "tourist",
                rate: 0,
                words: "",
            },
            pageNum: 1,
            everyPageShow: 10,
        };
    },
    methods: {
        submitFeedback() {
            this.$store.dispatch("prepareSendFeedback", this.feedback);
            this.feedback.rate = 0;
            this.feedback.words = "";
        },
        changePage(pageNum) {
            this.pageNum = pageNum;
        },
        changeEveryPageShow(everyPageShow) {
            this.everyPageShow = everyPageShow;
        },
    },
    computed: {
        ...mapState({ feedbackList: "feedbackList" }),
        showList() {
            let start = (this.pageNum - 1) * this.everyPageShow;
            let end = this.pageNum * this.everyPageShow;
            return this.feedbackList.slice(start, end);
        },
    },
    mounted() {
        // 挂载读取历史评价
        this.$store.dispatch("initailizeEvaluate");

        console.log("读取历史评价");
    },
};
</script>

<style scoped>
div {
    color: #464c5b;
}
.feedback-submit {
    display: block;
    margin: 10px auto;
}
.one-feedback {
    margin: 20px 0;
}
.card {
    margin-bottom: 10px;
}
</style>
